<template>
    <div id="chat-view" :class="['chat-view-init',{'chat-view':init}]">
    <h1>聊天服务</h1>
    <!-- <button @click="scrollToBottom">button</button> -->
    <div class="chat">
        <img>
        <div class="chat-content">
            <chat-bubble v-for="message in messages" 
                :message="message.text" 
                :is-receiver="message.receiver" 
                :key="message.id"
                :request=message.request />
        </div>
        <img>
    </div>
    </div>
</template>

<script>
import ChatBubble from '@/components/ChatBubble.vue';

export default {
    name: "ChatView",
    components: {
        ChatBubble,
    },
    data(){
        return{
            //控制实现本页面跳出的效果
            init:false,
        }
    },
    mounted(){
        //通过设定延迟时间，实现跳出本页面的效果
        setTimeout(() => {
            this.init=true;
        }, 10);
    },
    computed:{
        //将../store/index.js中保存的聊天记录转到messages中进行渲染
        messages(){
            return this.$store.getters.getMessages;
        }
    },
};
</script>


<style scoped>
.chat-view-init{
  position: relative;
  width: 60vw;
  left: -60%;
  transform: translate(-40%,0%);
  transition: top 0.5s, left 0.5s, bottom 0.5s, right 0.5s;
  z-index: 1;/*覆盖优先度 */
}

.chat-view{
  position: relative;
  width: 75vw;
  left: 30vw;
  z-index: 1;/*覆盖优先度 */
}

.chat {
    display: flex;
    align-items: center;
    justify-content: center;
}
.chat-content{
    width: 84vw;
    display: flex;
    flex-direction: column;
}

img{
    width: 5.4vw;
}
</style>
